<template>
  <div class="audition159">
    <h3><strong>什么是观察者模式？</strong></h3>
    <p>比如现在快递员手里有一堆快递，他要一个个打电话通知收快递的人，快递到了，然后把快递送过去</p>
    <h3><strong>什么是发布订阅模式？</strong></h3>
    <p>现在快递员仍然有一堆快递，但是他直接放到了菜鸟驿站这个中转站，然后收快递的人去拿。</p>
    <p>其中，快递员不再关心这个快递是谁的，会是谁来拿，什么时候拿。他只是把快递扔到了中转站，收快递的人会主动凭借某个凭证去拿。</p>
    <h3><strong>js实现观察者模式：</strong></h3>
    <v-md-preview :text="text1" />
  </div>
</template>

<script>
const prefix = '``` js'
const suffix = '```'
export default {
  name: 'Audition159',
  data() {
    return {
      text1: `${prefix}
      var shopObj = {}
      shopObj.list = []
      // 订阅
      shopObj.listen = function (key, cb) {
        if(!this.list[key]) {
          this.list[key] = []
        }
        this.list[key].push(cb)
      }
      // 发布
      shopObj.publish = function (key) {
        // this.list[key]里面是一堆订阅者的cb回调函数
        this.list[key].forEach(item => {
          // 把接收到的订阅者的参数传给订阅者
          item.apply(this, arguments)
        })
      }
      shopObj.listen('华为', function (name, type) {
        console.log('A用户收到：' + name + type + '降价了')
      })
      shopObj.publish('华为', 'P30')
      \n${suffix}`,
    }
  }
}
</script>

<style>

</style>